<template>
  <div class="welcome">
    <a-row>
      <a-col :span="8"
        ><div class="work">
          <h2>工作台</h2>
          <div class="avatar">
            <div>
              <a-avatar
                :size="64"
                src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
              />
            </div>
            <div class="title">
              <div>
                <h3>{{ greet }}</h3>
              </div>
              <div>年轻就该即使行乐!</div>
            </div>
          </div>
        </div></a-col
      >
      <a-col :span="4"> </a-col>
      <a-col :span="4"> </a-col>
      <a-col :span="8">
        <a-list class="alist" :grid="{ gutter: 10, column: 2 }">
          <a-list-item class="aitem">
            <a-card :bordered="false" title="访问次数"> <h3>1314</h3> </a-card>
          </a-list-item>
          <a-list-item class="aitem">
            <a-card :bordered="false" title="使用次数"> <h3>3145</h3></a-card>
          </a-list-item>
        </a-list>
      </a-col>
    </a-row>

    <div class="card1">
      <a-card
        :headStyle="{ backgroundColor: '	#F0FFFF' }"
        class="comment"
        title="最新商品评论"
      >
        <span class="more" slot="extra">更多</span>
        <a-list
          class="comment-list"
          item-layout="horizontal"
          :data-source="data"
        >
          <a-list-item slot="renderItem" slot-scope="item, index">
            <a-comment :author="item.author" :avatar="item.avatar">
              <p slot="content">
                {{ item.content }}
              </p>
              <a-tooltip
                slot="datetime"
                :title="item.datetime.format('YYYY-MM-DD HH:mm:ss')"
              >
                <span>{{ item.datetime.fromNow() }}</span>
              </a-tooltip>
            </a-comment>
          </a-list-item>
        </a-list>
      </a-card>

      <div style="width: 35%">
        <a-card
          :headStyle="{ backgroundColor: '	#F0FFFF' }"
          :bodyStyle="{ backgroundColor: '#DCDCDC' }"
          title="快速开始/便捷导航"
        >
          <a-card-grid style="width: 25%; text-align: center">
            操作一
          </a-card-grid>
          <a-card-grid style="width: 25%; text-align: center">
            操作二
          </a-card-grid>
          <a-card-grid style="width: 25%; text-align: center">
            操作三
          </a-card-grid>
          <a-card-grid style="width: 25%; text-align: center">
            操作四
          </a-card-grid>
        </a-card>

        <a-card
          class="abcd"
          :headStyle="{ backgroundColor: '	#F0FFFF' }"
          :bodyStyle="{ height: '250px' }"
          title="xx指数"
        >
          <div id="main" style="width: 100%; height: 100%"></div>
        </a-card>
      </div>
    </div>

      <div class="make">
        <a-card
        :bordered="false"
        :headStyle="{ backgroundColor: '	#F0FFFF' }"
        class="comment"
        title="最新商品评论"
      >
        <span class="more" slot="extra">更多</span>
        <a-list
          class="comment-list"
          item-layout="horizontal"
          :data-source="data2"
        >
          <a-list-item slot="renderItem" slot-scope="item, index">
            <a-comment :author="item.author" :avatar="item.avatar">
              <p slot="content">
                {{ item.content }}
              </p>
              <a-tooltip
                slot="datetime"
                :title="item.datetime.format('YYYY-MM-DD HH:mm:ss')"
              >
                <span>{{ item.datetime.fromNow() }}</span>
              </a-tooltip>
            </a-comment>
          </a-list-item>
        </a-list>
      </a-card>
      </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import moment from "moment";
export default {
  data() {
    return {
      greet: "",
      option: {
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            name: "销售占比",
            type: "pie",
            radius: ["100%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "食品饮料" },
              { value: 735, name: "电子产品" },
              { value: 580, name: "衣服搭配" },
            ],
          },
        ],
      },
      data: [
        {
          author: "似水流年",
          avatar:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2Fed%2F20%2F07%2Fed2007135110a9db844d74fcbaa825fc.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1646207795&t=1978681f6d7a3b6106a049602cd28eb0",
          content: "那是一种内在的东西，他们到达不了，也无法触及，那是你的.",
          datetime: moment().subtract(1, "days"),
        },
        {
          author: "give me five",
          avatar:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F44%2F65%2Ff8%2F4465f84e9ac886acd9f7702f60fd7f1b.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1646207828&t=c6977ffbb8793b36f0f3618ddb0a248e",
          content:
            "冷静，并不是智士的专属，成功固然欢喜，失败固然愤怒，重要是如何保住性命。自失败中站起，不管在什么情绪之下，都要保持三分冷静，才能扳回劣势.",
          datetime: moment().subtract(2, "days"),
        },
        {
          author: "是小杜小杜呀",
          avatar:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202006%2F01%2F20200601091140_yNxua.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1646209018&t=9124470acad89162e9893a47e7cbc8ea",
          content: "希望是一个好东西，也许是最好的，好东西是不会消亡的.",
          datetime: moment().subtract(2, "days"),
        },
      ],
      moment,
      data2: [
        {
          author: "喜羊羊",
          avatar:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fci.xiaohongshu.com%2F66583566-48af-5238-8577-8cb2d59d895c%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fci.xiaohongshu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1646217983&t=8e730cd29ba4a050e38c268e7bb4b7ce",
          content: "合并git后台管理项目中商品分类分支.",
          datetime: moment().subtract(0.5, "days"),
        },
        {
          author: "懒洋洋",
          avatar:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg2.doubanio.com%2Fview%2Frichtext%2Flarge%2Fpublic%2Fp78139872.jpg&refer=http%3A%2F%2Fimg2.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1646218075&t=a723e8f1b91a099aa24fc6c6717e2f93",
          content:
            "已创建新的分支goods_params.",
          datetime: moment().subtract(3, "days"),
        },
        {
          author: "沸羊羊",
          avatar:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fmp3.qiyipic.com%2Fimage%2F20180428%2Fea%2F0e%2Fppu_243878050102_pp_601_m1_300_300.jpg&refer=http%3A%2F%2Fmp3.qiyipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1646218099&t=47d50850a57033a5b69b62ea0ca8ceca",
          content: "已完成登录界面.",
          datetime: moment().subtract(5, "days"),
        },
      ],
    };
  },
  mounted() {
    var chartDom = document.getElementById("main");
    var myChart = echarts.init(chartDom);
    this.option && myChart.setOption(this.option);
  },
  created() {
    this.getMycount();
  },
  methods: {
    getMycount() {
      let date = new Date();

      if (date.getHours() >= 0 && date.getHours() < 12) {
        this.greet = "上午好！.缺舟";
      } else if (date.getHours() >= 12 && date.getHours() < 18) {
        this.greet = "下午好！.缺舟";
      } else {
        this.greet = "晚上好！.缺舟";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.work {
  margin-right: 10px;
  .avatar {
    display: flex;
    margin-top: 29px;
  }
}
.title {
  margin: auto 0;
  margin-left: 15px;
}
.alist {
  position: absolute;
  width: 300px;
  float: right;
  top: 23px;
  right: -18px;
}
.aitem {
  width: 40%;
}
.comment {
  width: 60%;
}
.more {
  color: deepskyblue;
}
.headStyle {
  background-color: #00ffff;
}
.card1 {
  margin-top: 50px;
  display: flex;
  justify-content: space-around;
}
.abcd {
  margin-top: 50px;
}
.make{
  padding: 24px;
  padding-left: 14px;
}
</style>